<template>
	<div class="adminBody flex">
		<div class="leftFlex flex" :class="tab.isCollapse ? '' : 'active'">
			<div class="head flex">
				<a class="flex" href="/">
					<img src="/static/img/logo_text.png" />
				</a>
				<div class="el-popovers">
					<el-popover placement="bottom" title="设置" trigger="hover">
						<div class="setLayer">
							<div class="serverFlex flex">
								<span>服务</span>
								<i>{{ app.getUserPass().api == "prod" ? "正式服" : "测试服" }}</i>
							</div>
							<div class="uploadStatus flex">
								<span>隐藏侧边栏</span>
								<el-switch
								  v-model="tab.isCollapse"
								  @change="changeCollapse"
								  :active-value="true"
								  :inactive-value="false"
								></el-switch>
							</div>
						</div>
						<i slot="reference" class="set iconfont icon-chakantiezigengduo"></i>
					</el-popover>
				</div>
			</div>
			<div class="scrollbar">
				<el-menu router :collapse="tab.isCollapse" :default-active="tab.activePath" class="el-menu-vertical">
					<template v-for="(item, index) in tab.list">
						<template v-if="item.list.length > 1">
							<el-submenu :index="item.path">
								<template slot="title">
									<i :class="item.icon"></i>
									<span>{{ item.title }}</span>
								</template>
								<el-menu-item-group>
									<template slot="title">{{ item.desc }}</template>
									<el-menu-item :index="prop.path" v-for="(prop, i) in item.list">{{ prop.title }}</el-menu-item>
								</el-menu-item-group>
							</el-submenu>
						</template>
						<template v-else>
							<el-menu-item :index="item.list[0].path">
								<i :class="item.icon"></i>
								<span slot="title">{{ item.list[0].title }}</span>
							</el-menu-item>
						</template>
					</template>
				</el-menu>
			</div>
		</div>
		<div class="rightFlex flex">
			<div class="head flex">
				<div class="left">{{ $route.meta.title }}</div>
				<div class="right flex">
					<a class="a" :href="`${app.appList()}/admin/Home/ws`" target="_blank">
						<i class="el-icon-help" style="font-size: 27px;"></i>
					</a>
					<a class="a" @click="uploadShow">
						<i class="iconfont icon-shangchuan" style="font-size: 22px;"></i>
					</a>
					<router-link to="/user/index" class="a">
						<i class="iconfont icon-sousuo"></i>
					</router-link>
					<router-link to="/set/index" class="a">
						<i class="iconfont icon-shezhi"></i>
					</router-link>
					<el-dropdown @command="exit">
						<div class="user flex">
							<img :src="app.getUserInfo().avatar" onerror="javascript:this.src = '/static/img/a3o.png'" />
							<i class="iconfont icon-right-1-copy"></i>
						</div>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
			<div class="main scrollbar">
				<router-view />
			</div>
		</div>
		<el-dialog title="提示" :visible.sync="uploadHand.show" width="600px" :close-on-click-modal="false">
			<div v-loading="uploadHand.load.load">
				<el-form label-position="top" v-if="uploadHand.data" v-loading="uploadHand.load.load">
					<el-upload
						class="avatar-uploader"
						action="" 
						:show-file-list="false" 
						:http-request="(response, file, fileList) => fileUpload(response,file,fileList)"
					>
						<a class="color" style="margin-bottom:25px;font-size:13px;display: block;">上传文件到服务器</a>
					</el-upload>
					<el-form-item label="文件下载地址">
						<el-input v-model="uploadHand.data.url"></el-input>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// 左侧tab选项卡
				tab: {
					
					// 是否收缩
					isCollapse: localStorage.getItem("isCollapse") ? (localStorage.getItem("isCollapse") === 'true' ? true : false) : false,
					
					// 当前选中的path
					activePath: this.$route.path,
					
					// 列表
					list: [
						{
							title: "数据分析",
							icon: "el-icon-s-data",
							desc: "平台盈亏概览",
							path: "/index/",
							list: [
								{ title: "数据分析", path: "/index/index" },
								{ title: "推广亏盈", path: "/index/money" },
								{ title: "订单记录", path: "/index/order" },
								{ title: "大屏图表", path: "/index/echart" },
							]
						},
						{
							title: "用户",
							icon: "el-icon-user-solid",
							desc: "共计注册63010个",
							path: "/user/",
							list: [
								{ title: "用户列表", path: "/user/index" },
							]
						},
						{
							title: "使用记录",
							icon: "el-icon-s-order",
							desc: "",
							path: "/use/",
							list: [
								{ title: "使用记录", path: "/use/index" },
							]
						},
						{
							title: "系统设置",
							icon: "el-icon-s-tools",
							desc: "请慎重修改",
							path: "/set/",
							list: [
								{ title: "基本设置", path: "/set/index" },
								{ title: "会员价格", path: "/set/vipPrice" },
								{ title: "Token内置", path: "/set/builtToken" },
								{ title: "投诉管理", path: "/set/complaint" },
								{ title: "版本升级", path: "/set/version" },
								{ title: "管理员", path: "/set/admin" },
								{ title: "渠道设置", path: "/set/appChannel" },
								{ title: "安卓支付配置", path: "/set/payChannel" },
								{ title: "音乐提交敏感词", path: "/set/sensitiveSords" },
								{ title: "归因上报日志", path: "/set/adsReport" },
								{ title: "归因监测日志", path: "/set/adsMonitor" },
							]
						},
					],
					
				},
				
				// 上传弹窗
				uploadHand:{
					show: false,
					load: { load: false },
					data: null,
				},
				
			};
		},
		methods: {
			
			// 修改是否展开侧边栏
			changeCollapse(e){
				this.tab.isCollapse = e;
				localStorage.setItem("isCollapse", e);
			},
			
			// 打开上传弹窗
			uploadShow(){
				this.uploadHand.data = { url: "" };
				this.uploadHand.show = true;
			},
			
			// 上传文件
			fileUpload(res){
				let _this = this;
				_this.app.uploadFile({ file: res.file, type: "other", load: _this.uploadHand.load }).then((res) => {
					_this.uploadHand.data.url = res.data.url;
				});
			},
			
			// 退出账号
			exit(){
				this.app.removeUserInfo();
				location = "/login";
			},
			
		},
	};
</script>

<style lang="scss" scoped>
	.adminBody {
		height: 100%;
		width: 100%;
		overflow-x: auto;
		flex-direction: row;
		.leftFlex {
			width: auto;
			height: 100%;
			background: #FFF;
			flex-direction: column;
			transition: 0.2s all;
			&.active{
				width: 240px;
				.head{
					padding: 20px 13px 20px 13px;
					a{
						display: block;
					}
					.set{
						text-align: center;
					}
				}
			}
			.head{
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 20px 13px 20px 24px;
				a{
					display: none;
					flex-direction: row;
					width: 250px * 0.7;
					img{ width: 100%; display: block; }
				}
				.set{
					text-align: right;
					font-size: 20px;
					flex: 1;
					width: 0;
					cursor: pointer;
				}
			}
			.scrollbar{
				flex: 1;
				height: 0;
				.el-menu-vertical{
					width: 100%;
					border-right: 0;
				}
			}
		}
		.rightFlex {
			flex: 1;
			height: 100%;
			width: 0;
			flex-direction: column;
			background: #FFF;
			.head{
				height: 66px;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding: 0 25px;
				.left{
					font-size: 17px;
					font-weight: 300;
				}
				.right {
					flex-direction: row;
					align-items: center;
					.a {
						margin-left: 35px;
						text-decoration: none;
						position: relative;
						cursor: pointer;
						i {
							color: #575782;
							font-size: 24px;
						}
					}
					.add {
						margin-left: 35px;
						text-decoration: none;
						background: $background;
						border-radius: 18px;
						width: 55px;
						line-height: 40px;
						text-align: center;
						i {
							color: #FFF;
							font-size: 24px;
						}
					}
					.user {
						margin-left: 40px;
						flex-direction: row;
						cursor: pointer;
						align-items: center;
						i {
							margin-left: 10px;
							font-size: 17px;
							transform: rotate(90deg);
						}
						img {
							display: block;
							width: 31px;
							height: 31px;
							border-radius: 50%;
						}
						b {
							position: absolute;
							top: -21px;
							padding: 0 7px;
							right: -20px;
							background: linear-gradient(to right, #ff7979, #ec2f00);
							color: #FFF;
							border-radius: 5px;
							font-size: 12px;
							line-height: 21px;
							font-weight: normal;
						}
					}
				}
			}
			.main{
				flex: 1;
				height: 0;
				background: #F9F9F9;
				border-radius: 12px 0 0 0;
				padding: 25px;
				border-left: solid 1px #F9F9F9;
				border-top: solid 1px #F9F9F9;
			}
		}
	}
	.setLayer {
		width: 180px;
		.serverFlex {
			width: 100%;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			span {
				font-size: 12px;
				line-height: 35px;
				color: #999;
			}
			i {
				color: #333;
				font-size: 13px;
				font-weight: normal;
				font-style: normal;
				line-height: 20px;
				padding: 0 6px;
				border-radius: 2px;
				line-height: 35px;
			}
		}
		.uploadStatus {
			width: 100%;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			span {
				font-size: 12px;
				line-height: 35px;
				color: #999;
			}
		}
	}
</style>